<template>
<div>
    <router-link tag='div' to='/' class='header-back' v-show='show'>
        <span class='iconfont header-back-icon'>&#xe624;</span>
    </router-link>
    <div class='header-fix' v-show='!show' :style='opacitystyle'>
        <router-link tag='div' to='/' class='header-fix-back'>
            <span class='iconfont'>&#xe624;</span>
        </router-link>
        <p>大连圣亚海洋世界</p> 
    </div>
</div>
</template>

<script>

export default {
  name: 'DetailHeader',
  data () {
    return {
      show: true,
      opacitystyle:{
          opacity:0
      }
    }
  },
  methods: {
    handleScroll () {
      const top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
      if (top > 60) {
          let opacity=top / 140
          opacity = opacity > 1 ? 1 : opacity
          this.opacitystyle={opacity}       
        this.show = false
      } else {
        this.show = true
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  unmounted () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
  </script>
  
<style lang='stylus' scoped>
.header-back
    position:absolute
    left:.2rem
    top:.2rem
    height:.8rem
    line-height :.8rem
    width:.8rem
    border-radius:.5rem
    background:rgba(0,0,0,.6)
    color:white
    text-align:center
    .header-back-icon
        font-size:.4rem
.header-fix
    z-index:2
    position :fixed
    height :.86rem
    top:0
    left:0
    right:0
    line-height :.86rem
    text-align :center
    background :#00bcd4
    color :white
    font-size :.32rem
    .header-fix-back
        position :absolute
        width :.64rem
        font-size: .4rem
        color :white
</style>